<template>
  <view class="page-container">
    <uni-list >
      <uni-list-item title="原定时间 " showArrow :rightText="planDepartureTime" />
      <uni-list-item title="延迟时间" showArrow  v-model="delayTime">
        <template v-slot:footer>
          <picker class="time-picker" mode="time" @change="handleTimeChange" >
            <text v-if="!delayTime">不可超过2个小时</text>
            <text v-else>{{delayTime + ':00' }}</text>
          </picker>
        </template>
      </uni-list-item>
      <uni-list-item direction="column">
        <template v-slot:body>
          <view class="textarea-wrapper">
            <textarea
              class="textarea"
              placeholder-style="color: #818181"
              placeholder="请输入延迟提货原因"
              v-model="delayReason"
              :maxlength="50"
              @input="updateWordCount"
            ></textarea>
            <text class="words-count" :class="{ error: wordsCount > 50 }">{{wordsCount}}/50</text>
          </view>
        </template>
      </uni-list-item>
      <uni-list-item :border="false">
        <template v-slot:body>
          <button  class="button"  @click="submit">提交</button>
        </template>
      </uni-list-item>
    </uni-list>
  </view>
</template>


<script setup>
import { onLoad } from '@dcloudio/uni-app'
import { putDriverTasksIDelaydAPI } from "../../api/task";
import { ref, computed } from "vue";

  // 原计划提货时间
const planDepartureTime = ref('')
  // 延迟提货任务的ID
const id=ref('')

// 获取传个来的值
onLoad((e) => {
  id.value = e.ids
  planDepartureTime.value=e.planDepartureTime
})

 // 延迟提货时间
 const delayTime = ref('')
  // 验证延迟时间
  const delayTimeValid = computed(() => {
    // 延迟时间不超过2小时
    const start = new Date(planDepartureTime.value)
    const end = new Date(delayTime.value)
    // 时间差区间在 0 ~ 7200 * 1000 毫秒
    return end - start > 0 && end - start < 7200 * 1000
  })



// 计算输入的内容
const delayReason = ref( '')
 // 统计输入的字数
 const wordsCount = computed(() => delayReason.value.length)
  // 验证延迟原因
  const delayReasonValid = computed(() => {
    return wordsCount.value <= 50 && wordsCount.value > 0
  })

  // 监听内容输入的长度
const updateWordCount = () => {
      wordsCount.value = delayReason.value.length;
   }



//  // 是否允许提交表单
//  const enableSubmit = computed(() => {
//     return !delayReasonValid.value || !delayTimeValid.value
//   })





  // 监听选中的的时间
const handleTimeChange = (event) => {
  // 选中时间发生变化时触发的事件
  // event.detail 带有选中的时间信息
  console.log('选中的时间：', event.detail.value);
  // 延迟提货时间，需要拼接日期
  const [date] = planDepartureTime.value.split(' ')
  delayTime.value = `${date} ${event.detail.value}`
}


// 点击提交事件
const submit = async () => {
// 校验表单
  if (delayReasonValid.value || delayTimeValid.value) {
    
    await putDriverTasksIDelaydAPI(delayTime.value, delayReason.value, id.value)
    uni.showToast({ title: "操作成功" })
      setTimeout(() => {
            // uni.redirectTo({
            //   url:'/subpkg_task/detail/index'
        // });
            // 返回上一页
            uni.navigateBack();
      }, 1000);
  } else {
    uni.showToast({ title: "请输入时间或内容", icon:'none' })
  }
     
   



}

</script>

<style lang="scss" scoped>
.page-container {
  padding: 30rpx 30rpx env(safe-area-inset-bottom);
  background-color: #f4f4f4;
  height: 97vh;

  ::v-deep .uni-list {
    border-radius: 16rpx;
    overflow: hidden;
  }

  .time-picker {
    color: #998c85;
    font-size: 30rpx;
  }

  ::v-deep .uni-icon-wrapper {
    padding-left: 0;
  }

  .textarea-wrapper {
    position: relative;
  }

  .textarea {
    width: 100%;
    height: 260rpx;
    font-size: 30rpx;
    padding: 20rpx 28rpx;
    background-color: #f4f4f4;
    border-radius: 16rpx;
    box-sizing: border-box;
    color: #000;
  }

  .words-count {
    position: absolute;
    bottom: 10rpx;
    right: 30rpx;
	  color: #998c85;
    font-size:30rpx;
  }

  .button {
    width: 100%;
    height: 100rpx;
    line-height: 100rpx;
    /* #ifdef APP */
    padding-top: 4rpx;
    /* #endif */
    margin: -20rpx auto 20rpx;
    color: #fff;
    font-size: 30rpx;
    border-radius: 100rpx;
    background-color: red;

    &[disabled] {
      background-color: #fadcd9;
    }
  }
}

</style>
